<template>
    <div class="login">
        <div class="login-con">
             <h4>
                登录账号
             </h4>
             <p>虾米 - 严选商城欢迎您</p>
              <!-- :value 就相当于自定义属性 -->
              <!-- @input 就相当于自定义事件 -->
              <!-- <yx-input :modelValue="title" @input="input"></yx-input> -->
              <!-- 手机号 -->
             <yx-input v-model="mobile" placeholder="手机号码" @blur="mobileFn" :class="regMobile==0?'':regMobile==1?'success':'error'">
                <template #rules>
                    {{regMobile==2?'必填':''}}
                </template>
                <template #icon>
                    <i class="iconfont icon-shouji"></i>
                </template>
             </yx-input>
             <!-- 密码 -->
             <yx-input v-model="pwd" placeholder="密码" @blur="pwdFn" :class="regPwd==0?'':regPwd==1?'success':'error'" :type="isEye?'text':'password'">
                 <template #rules>
                    {{regPwd==2?'必填':''}}
                </template>
                <template #icon>
                    <i :class="isEye?'iconfont icon-yanjing':'iconfont icon-biyanjing'" @click="isEye = !isEye"></i>
                </template>
             </yx-input>
             <!-- 确认密码 -->
             
             <!-- 注册按钮 -->
             <button class="register-btn" @click="login">立即登陆</button>
             <router-link to="/register" custom v-slot="{navigate}" >
                <p @click="navigate" class="link">还没有注册？ 立即注册</p>
             </router-link>
        </div>
   
        
       
    
        
    </div>
</template>
<script>
import yxInput from '@/components/yxInput'
import {ref,reactive,toRefs} from 'vue'
import {useRouter} from 'vue-router'
import {loginApi} from '@/utils/second.js'
import { Toast } from 'vant';
export default {
    setup(){
        const data = reactive({
            mobile:'',//手机号码
            pwd:'',//密码
            confirmPwd:'',
            imgCode:'',//图形验证码
            provice:'',//城市选择
            code:'',//短信验证码
            regMobile:0,//0表示你没有触摸过，1表示校验通过，2，校验不通过
            regPwd:0,//0表示你没有触摸过，1表示校验通过，2，校验不通过
            regConfirm:0,//0表示你没有触摸过，1表示校验通过，2，校验不通过
            isEye:false,//闭眼睛
            nick:'',//用户名
            regNick:0,//0表示你没有触摸过，1表示校验通过，2，校验不通过
            key:new Date().getTime(),//默认的时间戳
            show:false,
            btnMsg:'发送验证码',
            disabled:false,//按钮的状态
         
        })
        const router = useRouter()
        // 失去焦点触发的事件
         const mobileFn = ()=>{
            // 手机号的正则
            let regM = /^1[3|5|6|7|8|9][0-9]{9}$/
            // test()  方法校验正则 返回值是boolean值 通过true 否则false
            data.regMobile = regM.test(data.mobile)?1:2
            console.log( data.regMobile);

         }
        //  密码
        const pwdFn = ()=>{
            // 如果密码框不为空赋值为1，如果密码框为空，赋值为2
           data.regPwd = data.pwd?1:2
        }
        // 登陆/
        const login = ()=>{
            loginApi({mobile:data.mobile,pwd:data.pwd}).then(res=>{
                console.log(res);
                if(res.code==0){
                    Toast(res.msg)
                    // 把token存到本地
                    localStorage.setItem('token',res.data.token)
                    // 返回
                    router.back()


                }else{
                    Toast(res.msg)
                }
            })
        }

       
       
        
       
         return {mobileFn,...toRefs(data),pwdFn,login}
    },
    components:{
        yxInput
    }
}
</script>
<style lang="scss" scoped>
.login{
    padding: 15px;
    height: 100vh;
    .login-con{
        border:1px solid #ccc;
        padding: 40px 30px 10px 30px;
        height: 100%;
        h4{
            margin-top: 20px;
            font-size: 20px;
        }
        p{
             margin-top: 30px;
             font-size:14px;
             color:#999;
        }
    }

}
.success{
    border: 1px solid rgb(56, 219, 36);
    background: rgb(225, 255, 223)
}
.error{
    border: 0.01rem solid rgb(225, 44, 30);
    background: rgb(255, 233, 228);
}
.img-code{
    width:144px;
    height: 49px;
}
.btn{
    border:none;
    font-size: 14px;
    color:#444;
}
.register-btn{
    width: 210px;
    height: 42px;
    border-radius: 6px;
    background: -webkit-gradient(linear, left top, right top, from(#5ea6f8), to(#bb87f6));
    background: linear-gradient(90deg, #5ea6f8, #bb87f6);
    line-height: 42px;
    font-size: 16px;
    color: white;
    margin: 0 auto;
    margin-top: 20px;
    display: block;
    border: none;
    text-align: center;
}
.link{
    width: 100%;
    color: #549ff9!important;
    margin-top: 20px;
    text-align: center;
}
</style>
